<template>
  <div class="header-box">
   <!-- <div class="pull-down-box">
     <ComPullDown :options="pullOptions" @selectValue="selectValue"/>
   </div> -->
    <div class="nav-left item">   
      <div class="tab-item" v-for="(item, index) in list" 
                            :key="index" 
                            @click="tabClick(item)"
                            :class="tabId == item.value ? 'active-color': ''">{{item.name}}</div>
    </div>
    <div class="nav-title item">CIBN应用播控大数据分析</div>
    <div class="nav-right item">
      <span class="data">{{ timeInt }}</span>
      <span class="time">{{ time }}</span>
    </div>
  </div>
</template>

<script setup>
  import { onBeforeMount, ref, defineEmits, defineProps, watch } from "vue";
  import { formatYMDhms, getWeekDate } from '@/utils/func/util'
  // import ComPullDown from './ComPullDown.vue';
  /* eslint-disable */
// eslint-disable-next-line vue/no-setup-props-destructure
  const props = defineProps({
    tabId: {
        type: Number,
        required: false,
        default: 0,
    },
    showType:{
      type: String,
      default: 'sdk'
    },
    list:{
      type: Array,
      default: []
    }
  })
  const tab = ref(0);
  // 监听 data 变化，更新图表
  watch(() => props.showType, () => {
    console.log('props.showType',props.showType)
  }, { deep: true });

  const pullOptions = ['管控SDK统计', 'TMS系统统计'];

  //下拉选中
  const selectValue = (val) => {
    if(val == '管控SDK统计'){
      this.$push('/guankong')
    }else {
      this.$push('/tms')
    }
  };

  const tabList = [{
    name: '整体统计',
    value: 0
  }, {
    name: '应用分布',
    value: 1
  }, {
    name: '地域分布',
    value: 2
  }]

  const timeInt = ref('');
  const time = ref('');
  const emit = defineEmits(['updateClickItems'])
  
  onBeforeMount(() => {
    console.log('onBeforeMount');
    timeInt.value = formatYMDhms(new Date().getTime())
    time.value = getWeekDate()
  });
  const tabClick = (item) => {
    tab.value = item.value;
    emit('updateClickItems', tab.value);
  };
</script>
<style scoped lang="scss">
  .active-color {
    color: #fff;
  }
  .header-box{
    min-width: 1370px;
    height: 90px;
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    right: 0;
    background-image: url('../../assets/head-nav.png');
    background-size: 100% 100%;
    width: 100%;
    display: flex;
    color: #fff;
    .nav-left{
      width: 100%;
      padding-left: 60px;
      padding-top: 23px;
      display: flex;
      color:#ccc;
      .tab-item{
        padding-right: 30px;
        cursor: pointer;
      }
    }
    .item{
      flex: 1;
      font-size: 20px;
      font-weight: bold;
      &.nav-title{
        text-align: center;
        font-weight: bold;
        line-height: 90px;
        font-size: 36px;
      }
      &.nav-right{
        text-align: right;
        padding-right: 60px;
        padding-top: 25px;
        color: #fff;
        opacity: 0.7;
        .time{
          padding-left: 15px;
        }
      }
    }
  }
  .pull-down-box{
    width:125px;
    padding-top: 22px;
    font-size: 19px;
  }
</style>
